<script setup lang="ts">
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table'
import { ref, h } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { Button, message, DatePicker, Input } from 'ant-design-vue'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { reportPurchaseDeadLine } from '#/api/backend/goodsPurchaseTotalSku'

interface RowType {
  id: string
  goods_purchase_sn: string
  goods_no: string
  goods_name: string
  category1: string
  category2: string
  category3: string
  WarehouseName: string
  expected_completion_date: string
  go_dead_line?: string
  fo_dead_line?: string
  remark?: string
  _X_ROW_KEY?: string
}

const emit = defineEmits(['fetchData'])

const recordData = ref<RowType[]>([])

const handleDelete = (row: RowType) => {
  if (gridApi) {
    const currentData = gridApi.grid.getData()
    const index = currentData.findIndex((item: any) => item._X_ROW_KEY === row._X_ROW_KEY)
    if (index !== -1) {
      currentData.splice(index, 1)
      gridApi.setGridOptions({
        data: currentData,
      })
    }
  }
}

const handleSubmit = async () => {
  try {
    const currentData = gridApi.grid.getData()
    await reportPurchaseDeadLine({ data: currentData })
    message.success('操作成功')
    emit('fetchData')
    modalApi.close()
  } catch (error) {
    message.error('操作失败')
  }
}

const gridOptions: VxeGridProps<RowType> = {
  border: true,
  pagerConfig: {
    enabled: false,
  },
  columns: [
    { type: 'seq', width: 60, title: '编号' },
    { field: 'goods_purchase_sn', width: 130, title: '采购单号' },
    { field: 'goods_no', width: 100, title: '货号' },
    { field: 'goods_name', width: 150, title: '货品名称' },
    { field: 'category', width: 170, title: '分类', slots: { default: 'category' } },
    { field: 'WarehouseName', width: 100, title: '仓库' },
    { field: 'expected_completion_date', width: 100, title: '总交期' },
    { field: 'go_dead_line', width: 150, title: '商企要求交期', slots: { default: 'go_dead_line' } },
    { field: 'fo_dead_line', width: 150, title: '工厂预计交期', slots: { default: 'fo_dead_line' } },
    { field: 'remark', width: 100, title: '备注', slots: { default: 'remark' } },
    { field: 'operation', width: 60, title: '操作', slots: { default: 'operation' } },
  ],
  data: [],
  height: '400px',
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/5',
  appendToMain: true,
  fullscreen: false,
  onConfirm: handleSubmit,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData<RowType[]>()
      recordData.value = data || []
      if (gridApi && recordData.value) {
        gridApi.setGridOptions({
          data: recordData.value,
        })
      }
    }
  },
})
</script>

<template>
  <Modal title="登记交期">
    <div class="p-4">
      <Grid>
        <template #category="{ row }">{{ row.category1 }}/{{ row.category2 }}/{{ row.category3 }}</template>
        <template #go_dead_line="{ row }">
          <DatePicker v-model:value="row.go_dead_line" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="选择日期" allow-clear />
        </template>
        <template #fo_dead_line="{ row }">
          <DatePicker v-model:value="row.fo_dead_line" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="选择日期" allow-clear />
        </template>
        <template #remark="{ row }">
          <Input v-model:value="row.remark" placeholder="请输入备注" />
        </template>
        <template #operation="{ row }">
          <Button type="link" size="small" danger @click="handleDelete(row)">删除</Button>
        </template>
      </Grid>
    </div>
  </Modal>
</template>
